<template>
    <div>
        <div class="row">
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
        </div>
        <div class="row">
             <el-input-number v-model="num" :disabled="true"></el-input-number>
        </div>
        <div class="row">
            <el-input-number v-model="num" :step="2" stepStrictly></el-input-number>
        </div>
        <div class="row">
            <el-input-number v-model="numPrecision" :precision="2" :step="0.1" :max="10"></el-input-number>
        </div>
        <div class="row">
            <el-input-number v-model="num1"></el-input-number>
            <el-input-number size="medium" v-model="num2"></el-input-number>
            <el-input-number size="small" v-model="num3"></el-input-number>
            <el-input-number size="mini" v-model="num4"></el-input-number>
        </div>
        <div class="row">
          <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </div>
    </div>
</template>

<script>
import ElInputNumber from '../../components/InputNumber/index'
export default {
    data() {
      return {
        num: 2,
        numPrecision: 2,

        num1: 1,
        num2: 1,
        num3: 1,
        num4: 1
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    },
    components: {
        ElInputNumber
    }
}
</script>

<style>
.row {
    margin-top: 20px;
}
</style>